import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/actions/counter'
import Test from './Test'
import User from './User'

export default function App() {
  // useSelector 接收一个函数
  // 函数的参数 state 就表示 Redux 的整个状态（所有状态），这儿又把 state 进行了返回
  // !#2 获取数据的方式发生了变化
  // state = { counter: 10, user: { age: 18, name: 'zs' } }
  // const count = useSelector((state) => state.counter)
  const { counter: count } = useSelector((state) => state)
  // !#3 修改数据的方式也发生了变化
  const dispatch = useDispatch()
  return (
    <div>
      <h3>{count}</h3>

      <button onClick={() => dispatch(increment(1))}>+1</button>
      <button onClick={() => dispatch(increment(5))}>+5</button>
      <button onClick={() => dispatch(decrement(1))}>-1</button>
      <button onClick={() => dispatch(decrement(3))}>-3</button>
      <hr />
      <Test />
      <hr />
      <User />
    </div>
  )
}
